<template>
  <div>
    <a-modal
      :width="1000"
      v-model:visible="modalVisible"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <template #title> 新建角色 </template>
      <div>
        <a-form :model="form" auto-label-width>
          <a-row :gutter="24">
            <a-col :span="12">
              <a-form-item
                class="form-item"
                field="roleName"
                label="物料编码："
              >
                <a-space>
                  <a-input
                    :style="{ width: '220px' }"
                    placeholder="请输入角色名称"
                    v-model="form.roleName"
                    allow-clear
                  ></a-input>

                  <a-switch
                    v-model="value"
                    checked-value="1"
                    unchecked-value="2"
                  />
                  <template #checked> ON </template>
                  <template #unchecked> OFF </template>
                  <span>自动生成</span>
                </a-space>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item class="form-item" field="roleCode" label="物料名称">
                <a-input
                  placeholder="系统自动生成"
                  v-model="form.roleCode"
                  allow-clear
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin-top: 20px" :gutter="24">
            <a-col :span="12">
              <a-form-item class="form-item" field="roleCode" label="物料名称">
                <a-input
                  placeholder="请输入物料名称"
                  v-model="form.roleCode"
                  allow-clear
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item class="form-item" field="roleCode" label="物料名称">
                <a-input
                  placeholder="系统自动生成"
                  v-model="form.roleCode"
                  allow-clear
                ></a-input>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin-top: 20px" :gutter="24">
            <a-col :span="8">
              <a-form-item class="form-items" field="roleCode" label="主单位">
                <a-select
                  :style="{ width: '160px' }"
                  placeholder="Select"
                  :trigger-props="{ autoFitPopupMinWidth: true }"
                >
                  <a-option>Beijing-Beijing-Beijing</a-option>
                  <a-option>Shanghai</a-option>
                  <a-option>Guangzhou</a-option>
                  <a-option disabled>Disabled</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item class="form-items" field="roleCode" label="辅单位">
                <a-select
                  :style="{ width: '160px' }"
                  placeholder="Select"
                  :trigger-props="{ autoFitPopupMinWidth: true }"
                >
                  <a-option>Beijing-Beijing-Beijing</a-option>
                  <a-option>Shanghai</a-option>
                  <a-option>Guangzhou</a-option>
                  <a-option disabled>Disabled</a-option>
                </a-select>
              </a-form-item>
            </a-col>
            <a-col :span="8">
              <a-form-item class="form-items" field="roleCode" label="分类">
                <a-select
                  :style="{ width: '160px' }"
                  placeholder="Select"
                  :trigger-props="{ autoFitPopupMinWidth: true }"
                >
                  <a-option>Beijing-Beijing-Beijing</a-option>
                  <a-option>Shanghai</a-option>
                  <a-option>Guangzhou</a-option>
                  <a-option disabled>Disabled</a-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin-top: 20px" :gutter="24">
            <a-col :span="12">
              <a-form-item class="form-item" field="roleCode" label="是否启用">
                <a-radio value="radio">Radio</a-radio>
                <a-radio value="disabled radio" :default-checked="true" disabled
                  >Disabled Radio</a-radio
                >
              </a-form-item>
            </a-col>
            <a-col :span="12">
              <a-form-item class="form-item" field="roleCode" label="安全库存">
                <a-radio value="radio">Radio</a-radio>
                <a-radio value="disabled radio" :default-checked="true" disabled
                  >Disabled Radio</a-radio
                >
              </a-form-item>
            </a-col>
          </a-row>
          <a-row style="margin-top: 20px" :gutter="24">
            <a-col :span="16">
              <a-form-item class="form-item" field="roleCode" label="备注">
                <a-textarea placeholder="Please enter something" allow-clear />
              </a-form-item>
            </a-col>
          </a-row>
          <!-- <div class="form">
            
            <a-form-item class="form-item" field="roleCode" label="物料名称">
              <a-input
                placeholder="系统自动生成"
                v-model="form.roleCode"
                allow-clear
              ></a-input>
            </a-form-item>
            



          </div> -->
        </a-form>
      </div>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref } from 'vue';

  const form = reactive({
    roleName: '',
    roleCode: ''
  });
  const value = ref();
  const props = withDefaults(
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false
    }
  );

  const emit = defineEmits(['update:visible', 'addRoleEmit']);

  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    }
  });

  // 确定
  const handleOk = async () => {
    emit('addRoleEmit', form);
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };
</script>

<style scoped lang="less">
  .form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;

    .form-item {
      width: 49%;
    }
  }

  ::v-deep .arco-row-justify-start:nth-child(3) {
    margin-left: 25px;
  }
  ::v-deep .arco-row-justify-start:nth-child(5) {
    margin-left: -55px;
  }
</style>
